<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
// import BasicReact from './react-app/BasicReact.jsx';
import BasicReact from './react_app/BasicReact.jsx';
import { applyPureReactInVue, applyReactInVue } from 'veaury'
const TestReactApp = applyReactInVue(BasicReact)
// console.log('==>>', TestReactApp)
function testClick(str: any) {
  console.log('TestReactApp clicked', str)
}
const name = ref('vue')
</script>

<template>

  <main>
    <div>
      Vue app with TypeScript and Vite
      <TestReactApp :name="name" @click="testClick">
        <template v-slot:slot1>
          <div>
            插槽1 (render props)
          </div>
        </template>
      </TestReactApp>
    </div>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
